<template>
<div id="home">
  <template>
    <el-tabs id="navigation" v-model="activeName">
      <el-tab-pane label="主页" name="first">
            <div class="total">
                <div>
                  <h1>当天通过人数:</h1>
                  <div shadow="always" class="todaytotal">
                    {{ this.todaytotal }}
                  </div>
                </div>
                <div> <!-- 未解决 -->
                  <h1>当月通过人数:</h1>
                  <div shadow="always" class="monthtotal">
                    {{ this.monthtotal }}
                  </div>
                </div>
            </div>
            <div class="data">
              <h1>人流量数</h1>
              <div class="datainside">
                <el-table
                  height= "400"
                  :data="counterData">
                  <el-table-column
                    prop="time"
                    label="更新时间"
                    :formatter="dateFormat"
                    width="380">
                  </el-table-column>
                  <el-table-column
                    prop="counter"
                    label="人流量数"
                    width="380">
                  </el-table-column>
                  <el-table-column
                    prop="id"
                    label="序号"
                    width="200">
                  </el-table-column>
              </el-table>
              </div>
            </div>
      </el-tab-pane>
      <el-tab-pane label="用户管理" name="second">
        <template>
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="register_time"
            label="注册时间"
            :formatter="dateFormat"
            width="92">
          </el-table-column>
          <el-table-column
            prop="id"
            label="编号"
            width="60">
          </el-table-column>
          <el-table-column
            prop="username"
            label="用户名"
            width="120">
          </el-table-column>
          <el-table-column
            prop="sex"
            label="性别"
            width="60">
          </el-table-column>
          <el-table-column
            prop="birthday"
            label="生日"
            :formatter="dateFormat"
            width="92">
          </el-table-column>
          <el-table-column
            prop="school"
            label="学校"
            width="120">
          </el-table-column>
          <el-table-column
            prop="college"
            label="学院"
            width="120">
          </el-table-column>
          <el-table-column
            prop="studentNumber"
            label="学号"
            width="120">
          </el-table-column>
          </el-table>
        </template>
      </el-tab-pane>
    </el-tabs>
  </template>
</div>
</template>

<script>
import DataChart from '../components/DateChart.vue'
import moment from 'moment' // 时间格式处理插件 引入转换时间格式 
export default {
  data () {
    return {
      // 当日通过人数
      todaytotal: 0,
      // 当月通过人数
      monthtotal: 0,
      timer: '',
      activeName: 'first', // 默认页
      // 用户数据
      tableData: [{
        register_time: '',
        id: '',
        username: '',
        sex: '',
        birthday: '',
        school: '',
        college: '',
        studentNumber: ''
      }],
      // 人流统计数据
      counterData: [{ 
        counter: '',
        id: '',
        time: ''
      }],
    }
  },
  components:{
    DataChart
  },
  methods: {
    // 直接获取  2022-08-11T07:10:13.000Z ISO格式时间字符串
     
    //  上面这个带T和Z这种是ISODATE .
    // 因为北京处于东八区.我们北京时间UTC+8 ,
    //  所以，转换成北京时间需要加上 8 个小时
     
    //  T表示分隔符，Z表示的是UTC。
    // UTC：世界标准时间，在标准时间上加上8小时，即东八区时间，也就是北京时间。
     
    // 获取的数据会与实际时间相差 8 小时 
    // 编写日期格式化方法
    dateFormat: function(row, column) {
      // console.log(row, column)
      const date = row[column.property]
      // 判断时间是否为空
      if (date === undefined) {
        return ''
      }
      // 我们正常使用的是
      // 这里的格式根据需求修改
      return moment(date).format('YYYY-MM-DD HH:mm:ss')
    },
    getData() {
      // 人流量数据获取
      var id
      var counter
      var time
      this.$http.post('/api/user/queryData',{
        counter: counter,
        id: id,
        time: time
      }, {}).then((Response) => {
        this.counterData = Response.data
        // console.log(Response)
        // console.log(this.counterData)
        this.getTotal(Response)
      })
    },
    // 求当日用户总和
    getTotal(obj) {
      var total = 0;
      var month = 0;
      var sum = []
      var data = {
        counter: '',
        id: '',
        time: ''
      }
      // console.log('对象:')
      // console.log(obj)
      data = obj.data
      // console.log('获取的')
      // console.log(data)
      // console.log('对象长度 = ' +obj.data.length);
      // console.log('获取对象长度 = ' + data.length)
      //  将对象中的值赋值进数组
      for(let i = 0; i <= data.length; i++){
        // console.log(data[i].counter);
        // console.log(data[i].time); // 获取当前时间
        // console.log('---------------');
        const date = new Date(data[i].time);
        // console.log('获取数据库时间:')
        // console.log(date);// 中国标准时间
        // console.log(date.getDate());// 获取当前日期
        // console.log(typeof(data[i].counter))
        // console.log('当天时间:');
        const dateToday = new Date();
        // console.log(dateToday);
        // console.log('---------------');
        // 判断是否为当天数据
        if(date.getDate() === dateToday.getDate()){
          sum[i] = data[i].counter;
          total = total + sum[i];
        }
        // 判断是否为当月份数据
        if(date.getMonth() === dateToday.getMonth()){
          sum[i] = data[i].counter;
          month = month + sum[i];
        }
        // sum[i] = data[i].counter;
        // console.log(sum[i])
        // total = total + sum[i];
        this.todaytotal = total;
        this.monthtotal = month;
      }
    },
    // 时间处理函数
    transTime(time) {
      const date = new Date(time*1)
      console.log(date.getDate());
      return  `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`
    }
  },
  // 创建定时器 定时刷新数据
  created:function () {
    this.getData()
    // 3 秒刷新
    this.timer = setInterval(this.getData, 3000)
  },
  beforeDestroy: function () {
    // 关闭窗户时候清除定时器
    clearInterval(this.timer)
  },
  // 在编译好的 html 挂载到页面完成后执行的钩子函数 
  // 此时 dom 元素可以操作
  mounted () {
    // 用户数据 读取
    var id
    var username
    var sex
    var birthday
    var school
    var college
    var studentNumber
    var register_time
    this.$http.post('/api/user/queryUser', {
      register_time: register_time,
      id: id,
      username: username,
      sex: sex,
      birthday: birthday,
      school: school,
      college: college,
      studentNumber: studentNumber
    }, {}).then((response) => {
      // console.log(response)
      // 拿值
      this.tableData = response.data
    })
    // 获取人流信息
    this.getData()
  }
}
</script>

<style scoped>
/* 一、为什么要给style 节点加 scoped 属性（vue）
1、作用：
  当style标签里面有scoped属性时，它的css只作用于当前组建的元素。
在单页面项目中可以使组件之间互不污染，实现模块化
（实现组件的私有化，不对全局造成样式污染，表示当前style属性只属于当前模块）。
2、实现原理：
  style 标签中添加 scoped 属性后，
vue 就会为当前组件中的 DOM 元素添加唯一的一个自定义属性
（唯一性的标记）【data-v-xxx】,即CSS带属性选择器，
以此完成类似作用域的选择方式，从而达到样式私有化，不污染全局的作用。
注意：实际开发中，建议在每个组件的 style 身上都加上 scoped 属性。
*/
   .data {
    /* background-color: rgb(154, 139, 139); */
    width: 90%;
    height: 500px;
    text-align: center;
    padding-top: 40px;
    border-radius: 20px;
    margin: 20px auto;
    /* float: left;  */
  } 
  .data h1 {
    margin-bottom: 10px;
  }
  .datainside {
    height: 200px;
  }
  #navigation {
    padding: 1px;
  }
  .total {
    height: 200px;
    /* display: flex; */
    /* 电脑 平板 */
    padding: 1px;
    /* margin: 10px auto; */
    /* margin-bottom: 200px; */
    /* 手机 */
  }
  .todaytotal {
    /* margin: 10px 20px;  */
    /* 要改 */
    /* margin: 10px auto; */
    font-size: 100px;
    font-weight: 800;
    color: white;
    height: 140px;
    width: 380px;
    background-color:rgb(112, 72, 20);
    border-radius: 20px;
  }
  .monthtotal {
    /* margin: 10px 20px; */
    /* 要改 */
    /* margin: 10px auto; */
    font-size: 100px;
    font-weight: 800;
    color: white;
    height: 140px;
    width: 380px;
    background-color:rgb(112, 72, 20);
    border-radius: 20px;
  }
/* 超小设备 (手机, 600px 以下屏幕设备) */
@media only screen and (max-width: 968px) {
  .total {
    height: 200px;
    padding: 1px;
    margin-bottom: 200px;
    /* 手机 */
  }
  .todaytotal {
    /* margin: 10px 20px;  */
    /* 要改 */
    margin: 10px auto;
    font-size: 100px;
    font-weight: 800;
    color: white;
    height: 140px;
    width: 380px;
    background-color:rgb(112, 72, 20);
    border-radius: 20px;
  }
  .monthtotal {
    /* margin: 10px 20px; */
    /* 要改 */
    margin: 10px auto;
    font-size: 100px;
    font-weight: 800;
    color: white;
    height: 140px;
    width: 380px;
    background-color:rgb(112, 72, 20);
    border-radius: 20px;
  }
}
/* 大设备 956px 及其以上 */
@media only screen and (min-width: 956px) {
  .total {
    height: 200px;
    display: flex;
    /* 电脑 平板 */
    padding: 1px;
    /* margin: 10px auto; */
  }
  .todaytotal {
    margin: 10px 95px; 
    /* 要改 */
    /* margin: 10px auto; */
    font-size: 100px;
    font-weight: 800;
    color: white;
    height: 140px;
    width: 380px;
    background-color:rgb(112, 72, 20);
    border-radius: 20px;
  }
  .monthtotal {
    margin: 10px 95px;
    /* 要改 */
    /* margin: 10px auto; */
    font-size: 100px;
    font-weight: 800;
    color: white;
    height: 140px;
    width: 380px;
    background-color:rgb(112, 72, 20);
    border-radius: 20px;
  }
}
</style>
